package com.zj.wanandroid.ui.page.login

import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Icon
import androidx.compose.material.ScaffoldState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.zj.wanandroid.theme.AppTheme
import com.zj.wanandroid.theme.ToolBarHeight
import com.zj.wanandroid.ui.widgets.*
import com.zj.wanandroid.utils.RouteUtils.back
import kotlinx.coroutines.flow.collect

@ExperimentalComposeUiApi
@Composable
// 登录页面核心逻辑组件
fun LoginPage(
    navCtrl: NavHostController,          // 导航控制器，用于页面跳转
    scaffoldState: ScaffoldState,        // 管理SnackBar/抽屉等状态
    viewModel: LoginViewModel = hiltViewModel() // Hilt注入的ViewModel实例
) {
    val viewStates = viewModel.viewStates     // 视图状态数据（包含账号密码等UI状态）
    val keyboardController = LocalSoftwareKeyboardController.current // 键盘控制器
    val coroutineState = rememberCoroutineScope() // 协程作用域管理

    // 生命周期感知副作用：监听视图事件
    LaunchedEffect(Unit) {
        viewModel.viewEvents.collect { event ->
            // 处理返回事件：关闭当前页面
            if (event is LoginViewEvent.PopBack) {
                navCtrl.popBackStack()
            }
            // 处理错误事件：显示SnackBar提示
            else if (event is LoginViewEvent.ErrorMessage) {
                popupSnackBar(coroutineState, scaffoldState, label=SNACK_ERROR, message=event.message)
            }
        }
    }

    // 垂直滚动布局容器
    LazyColumn(
        modifier = Modifier
            .fillMaxSize() // 填满屏幕高度
            .background(AppTheme.colors.themeUi) // 设置背景颜色
            .pointerInput(Unit) { // 处理点击事件
                detectTapGestures( // 检测点击手势
                    onPress = { keyboardController?.hide() } // 点击时隐藏键盘
                )
            }
    ) {
        // 返回按钮区域
        item {
            Box(
                modifier = Modifier
                    .padding(bottom = 80.dp) // 底部外边距
                    .fillMaxWidth() // 宽度填满
                    .height(ToolBarHeight) // 固定高度
            ) {
                Icon( // 返回箭头图标
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = null, // 可访问性描述
                    tint = AppTheme.colors.mainColor, // 图标颜色
                    modifier = Modifier
                        .padding(start = 20.dp) // 左侧内边距
                        .align(Alignment.CenterStart) // 左对齐
                        .clickable { navCtrl.back() } // 点击返回上一页
                )
            }
        }

        // 应用标题区域
        item {
            Box(Modifier.fillMaxWidth()) {
                LargeTitle( // 大标题组件
                    title = "WanAndroid", // 标题文字
                    modifier = Modifier
                        .padding(bottom = 50.dp) // 下方外边距
                        .align(Alignment.Center), // 居中对齐
                    color = AppTheme.colors.mainColor // 文字颜色
                )
            }
        }

        // 账号输入框
        item {
            LoginEditView( // 自定义编辑框组件
                text = viewStates.account, // 绑定显示的账号文本
                labelText = "账号", // 标签文字
                hintText = "请输入用户名", // 输入提示
                onValueChanged = { viewModel.dispatch(LoginViewAction.UpdateAccount(it)) }, // 文本变化回调
                onDeleteClick = { viewModel.dispatch(LoginViewAction.ClearAccount) } // 清除按钮回调
            )
        }

        // 密码输入框
        item {
            LoginEditView(
                text = viewStates.password, // 绑定显示的密码文本
                labelText = "密码",
                hintText = "请输入密码",
                onValueChanged = { viewModel.dispatch(LoginViewAction.UpdatePassword(it)) },
                onDeleteClick = { viewModel.dispatch(LoginViewAction.ClearPassword) },
                modifier = Modifier.padding(top = 20.dp, bottom = 20.dp), // 上下外边距
                isPassword = true // 显示密码遮罩
            )
        }

        // 登录按钮
        item {
            AppButton( // 自定义按钮组件
                text = "登录",
                modifier = Modifier.padding(horizontal = 20.dp) // 水平方向内边距
            ) {
                keyboardController?.hide() // 点击隐藏键盘
                viewModel.dispatch(LoginViewAction.Login) // 触发登录动作
            }
        }
    }
}